﻿@page "/Doc/ColumnSize"
<UIColumns>
    <UIColumn Size="UIEColumnSize.X2">
        <DocsMenu />
    </UIColumn>
    <UIColumn Size="UIEColumnSize.X10">

        <UIH2>列尺寸(UIColumn.Size)</UIH2>
        <UIH3 IsSubTitle="true">用于设置列的宽度</UIH3>
        <UIContent>
            <p>
                默认情况下，使用 <code>@nameof(UIColumns)</code> 组件，多个列会自动均分。当然也可以使用 <code>@nameof(UIColumn)</code> 的 <code>@nameof(UIColumn.Size)</code> 属性设置单个列占据的宽度。
                <code>@nameof(UIColumns)</code> 比 Bootstrap 的十二栅格系统布局设计丰富得多。
            </p>
            <p><code>@nameof(UIColumn.Size)</code> 是 <code>UIEColumnSize</code> 枚举类型，里面包含列占据宽度的所有样式种类。根据不同的相对比例，可以分为多种情况。</p>
            <p>按照二、三、四等份均分：</p>
            <p>
                <ul>
                    <li><code>@nameof(UIEColumnSize.ThreeQuarters)</code> 四分之三</li>
                    <li><code>@nameof(UIEColumnSize.TwoThirds)</code>     三分之二</li>
                    <li><code>@nameof(UIEColumnSize.Half)</code>          二分之一</li>
                    <li><code>@nameof(UIEColumnSize.OneThird)</code>      三分之一</li>
                    <li><code>@nameof(UIEColumnSize.OneQuarter)</code>    四分之一</li>
                    <li><code>@nameof(UIEColumnSize.Full)</code>          自动填充剩下的空间</li>
                </ul>
            </p>
            <p>按照 20% 均分：</p>
            <p>
                <ul>
                    <li><code>@nameof(UIEColumnSize.FourFifths)</code>  80%</li>
                    <li><code>@nameof(UIEColumnSize.ThreeFifths)</code> 60%</li>
                    <li><code>@nameof(UIEColumnSize.TwoFifths)</code>   40%</li>
                    <li><code>@nameof(UIEColumnSize.OneFifth)</code>    20%</li>
                </ul>
            </p>
        </UIContent>

        <UIColumns>
            <UIColumn Size="UIEColumnSize.ThreeQuarters"><p class="bd-notification is-info">@nameof(UIEColumnSize.ThreeQuarters)</p></UIColumn>
            <UIColumn><p class="bd-notification is-fojeisj">Auto</p></UIColumn>
            <UIColumn><p class="bd-notification is-fojeisj">Auto</p></UIColumn>
        </UIColumns>

        <UIContent>
            <pre><code class="language-html hljs xml">
<span class="hljs-tag">&lt;<span class="hljs-name">UIColumns</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span> <span class="hljs-attr">Size</span>=<span class="hljs-string">"UIEColumnSize.ThreeQuarters"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-info"</span>&gt;</span>@nameof(UIEColumnSize.ThreeQuarters)<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-fojeisj"</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-fojeisj"</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">UIColumns</span>&gt;</span>
        </code></pre>
        </UIContent>
        <UIColumns>
            <UIColumn Size="UIEColumnSize.TwoThirds"><p class="bd-notification is-info">@nameof(UIEColumnSize.TwoThirds)</p></UIColumn>
            <UIColumn><p class="bd-notification is-fojeisj">Auto</p></UIColumn>
            <UIColumn><p class="bd-notification is-fojeisj">Auto</p></UIColumn>
        </UIColumns>

        <UIContent>
            <pre><code class="language-html hljs xml">
<span class="hljs-tag">&lt;<span class="hljs-name">UIColumns</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span> <span class="hljs-attr">Size</span>=<span class="hljs-string">"UIEColumnSize.TwoThirds"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-info"</span>&gt;</span>@@nameof(UIEColumnSize.TwoThirds)<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-fojeisj"</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-fojeisj"</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">UIColumns</span>&gt;</span>
        </code></pre>
        </UIContent>
        <UIBox>
            <pre><code class="language-html hljs xml">
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumns</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-info"</span>&gt;</span>First column<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">UIColumns</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">UIColumns</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-info"</span>&gt;</span>First nested column<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-info"</span>&gt;</span>Second nested column<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">UIColumns</span>&gt;</span>
        </code></pre>
        </UIBox>


        <UIBox>

            <UIColumns>
                <UIColumn>
                    <p class="bd-notification is-danger">Second column</p>
                </UIColumn>
            </UIColumns>

            <UIColumns>
                <UIColumn Size="UIEColumnSize.Half">
                    <p class="bd-notification is-danger">50%</p>
                </UIColumn>
                <UIColumn>
                    <p class="bd-notification is-danger">Auto</p>
                </UIColumn>
                <UIColumn>
                    <p class="bd-notification is-danger">Auto</p>
                </UIColumn>
            </UIColumns>
        </UIBox>

        <br />
        <UIH3>12列栅格系统</UIH3>
        <UIContent>
            <p>如果你使用过 Bosstrap ，应该了解 Bootstrap 的十二栅格网格，本框架中也可以实现对应的效果。</p>
            <p>使用 <code>UIEColumnSize</code> 中 X 开头的枚举即可设置12栅格系统。枚举 X1~X12 对应 1~12 个栅格。</p>
            <p>使用：<code>&lt;UIColumn Size=&quot;UIEColumnSize.X2&quot;&gt;&lt;/UIColumn&gt;</code></p>
            <p>完整实例如下：</p>
        </UIContent>
        <UIBox>
            @for (int i = 0; i < 12; i++)
            {
                int tmp = i;
                <UIColumns>
                    <UIColumn Size="@(UIEColumnSize.X1+tmp)"><p class="bd-notification is-info">X@(tmp + 1)</p></UIColumn>
                    @for (int k = 11 - tmp; k > 0; k--)
                    {
                        <UIColumn><p class="bd-notification is-fojeisj">Auto</p></UIColumn>
                    }
                </UIColumns>
            }
        </UIBox>
        <UIContent>
            <pre><code class="language-csharp hljs csharp">
    @@for (int i = 0; i <span class="hljs-tag">&lt; <span class="hljs-attr">12</span>; <span class="hljs-attr">i</span>++)
    {
            <span class="hljs-attr">int</span> <span class="hljs-attr">tmp</span> = <span class="hljs-string">i;</span>
        &lt;<span class="hljs-attr">UIColumns</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span> <span class="hljs-attr">Size</span>=<span class="hljs-string">"@@(UIEColumnSize.X1+tmp)"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-info"</span>&gt;</span>X@@(tmp + 1)<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
            @@for (int k = 11 - tmp; k &gt; 0; k--)
            {
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-fojeisj"</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
            }
            <span class="hljs-tag">&lt;/<span class="hljs-name">UIColumns</span>&gt;</span>
    }
        </code></pre>
        </UIContent>
        <br />
        <UIH3>列偏移(Offset)</UIH3>
        <UIContent>
            <p>跟 Bootstrap 一样，框架也可以使用 <code>@nameof(UIColumn.Offset)</code> 设置列偏移。</p>
            <p>其枚举使用跟设置列大小一样。使用示例如下：</p>
        </UIContent>
        <UIBox style="background-color:#f5f5f5;">
            <UIColumns>
                <UIColumn Size="UIEColumnSize.X2" Offset="UIEColumnOffset.Half"><p class="bd-notification is-info">Half(二分之一)</p></UIColumn>
            </UIColumns>
            <UIColumns>
                <UIColumn Size="UIEColumnSize.X2" Offset="UIEColumnOffset.OneThird"><p class="bd-notification is-info">OneThird(三分之一)</p></UIColumn>
            </UIColumns>
            <UIColumns>
                <UIColumn Size="UIEColumnSize.X2" Offset="UIEColumnOffset.X10"><p class="bd-notification is-info">X10(10个格)</p></UIColumn>
            </UIColumns>
        </UIBox>

        <UIContent>
            <UICode>
                &lt;UIColumns&gt;
                &lt;UIColumn Size=&quot;UIEColumnSize.X2&quot; Offset=&quot;UIEColumnOffset.Half&quot;&gt;&lt;p class=&quot;bd-notification is-info&quot;&gt;Half(二分之一)&lt;/p&gt;&lt;/UIColumn&gt;
                &lt;/UIColumns&gt;
                &lt;UIColumns&gt;
                &lt;UIColumn Size=&quot;UIEColumnSize.X2&quot; Offset=&quot;UIEColumnOffset.OneThird&quot;&gt;&lt;p class=&quot;bd-notification is-info&quot;&gt;OneThird(三分之一)&lt;/p&gt;&lt;/UIColumn&gt;
                &lt;/UIColumns&gt;
                &lt;UIColumns&gt;
                &lt;UIColumn Size=&quot;UIEColumnSize.X2&quot; Offset=&quot;UIEColumnOffset.X10&quot;&gt;&lt;p class=&quot;bd-notification is-info&quot;&gt;X10(10个格)&lt;/p&gt;&lt;/UIColumn&gt;
                &lt;/UIColumns&gt;
            </UICode>
        </UIContent>
        <br />
        <UIH3>指定宽度的窄列</UIH3>
        <UIContent>
            <p>默认情况下，列是固定宽度的或者说是按照比例分配每个列宽度，例如十二栅格。在某些情况下，希望设置值一个固定的列宽度值，则可以使用 <code>IsNarrow</code> 属性。</p>
        </UIContent>
        <UIBox>
            <p>正常情况下，列的宽度是不受内部子元素的响应的，是自适应的。</p>
            <UIColumns>
                <UIColumn>
                    <div class="bd-notification is-primary">
                        UIEColumnSize.Half
                        <div class="box is-info" style="width:200px;">内部子元素只有200px;</div>
                    </div>
                </UIColumn>
                <UIColumn Size="UIEColumnSize.Half">
                    <div class="bd-notification is-success">
                        UIEColumnSize.Half<div class="bd-notification is-warning">一半宽度</div>
                    </div>
                </UIColumn>
            </UIColumns>
        </UIBox>
        <p>使用 <code>IsNarrow</code> 属性，列会因为子元素的大小而变化。</p>
        <UIBox>
            <UIColumns>
                <UIColumn IsNarrow="true">
                    <div class="bd-notification is-primary">
                        列的宽度
                        <div class="box is-info" style="width:200px;">内部子元素只有200px;</div>
                    </div>
                </UIColumn>
                <UIColumn Size="UIEColumnSize.Half">
                    <div class="bd-notification is-success">
                        UIEColumnSize.Half
                        <div class="bd-notification is-warning">一半的宽度</div>
                    </div>
                </UIColumn>
            </UIColumns>
        </UIBox>
        <UIContent>
            <pre><code class="language-html hljs xml">
                <span class="hljs-tag">&lt;<span class="hljs-name">UIColumns</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span> <span class="hljs-attr">IsNarrow</span>=<span class="hljs-string">"true"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-primary"</span>&gt;</span>
            列的宽度
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box is-info"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:200px;"</span>&gt;</span>内部子元素只有200px;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">UIColumn</span> <span class="hljs-attr">Size</span>=<span class="hljs-string">"UIEColumnSize.Half"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-success"</span>&gt;</span>
            UIEColumnSize.Half
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bd-notification is-warning"</span>&gt;</span>一半的宽度<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">UIColumn</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UIColumns</span>&gt;</span>
        </code></pre>
        </UIContent>
    </UIColumn>
</UIColumns>

